今天給前往介紹頁的標語加上一些視覺效果，想做出像下面這種跳動效果。

先將標語的部分改一下，將圖標、文字和要動的部分拆開。

<label for="click-intro" class="to-intro">
  <p class="sub-text">
    標語 
    <span> . </span>
    <span> . </span>
    <span> . </span>
  </p>
</label>

加上動畫，讓他循環撥放

.sub-text span{
  animation: dot 1.8s ease-in-out infinite;
  animation-play-state: running;
}
@keyframes dot{
  0%,40%,100%{
    transform: translateY(0);
  }
  20%{
    transform: translateY(-.6vw);
  }
}

這時成功做出跳動效果了，不過三個點會一起跳動，那有沒有辦法可以讓三個點依序跳動？
把每個點加上class分別設置延遲時間試試

.sub-text span{
  animation-play-state: running;
}
.dot1{
  animation: dot 1.8s ease-in-out infinite;
}
.dot2{
  animation: dot 1.8s ease-in-out infinite;
  animation-delay: .18s;
}
.dot3{
  animation: dot 1.8s ease-in-out infinite;
  animation-delay: .36s;
}

不過這種寫法的缺點在於每增加一個點，就要多設置一次，那有沒有更簡潔的寫法可以達到相同效果？
如果把animation-delay改成 ‘要延遲的秒數 * 第幾個點’ ，那是不是能讓每個點的延遲時間隨著順序一起增加？
給每個點加上序號來辨別它在哪個位置，因為之後需要做運算，給每個點宣告變數作為序號。

<span style="--i:1">.</span>
<span style="--i:2">.</span>
<span style="--i:3">.</span>

修改一下延遲時間，因為每個點的延遲時間會帶入它自己的序號(--i)，所以前面的dot1~3都可以刪除，不用再給每個點分別設置。
最後還有一個點需要注意，這裡因為用到變數了，所以要套上一個calc()函數才能做運算。

.sub-text span{
  animation-delay: calc(0.18s * var(--i));
}

參考資料/延伸閱讀

1. medium
2. oxxostudio
3. csdn
4. MDN-calc
5. cnblogs